.item {
  @apply flex py-4 !text-[inherit] overflow-hidden;
  @apply w-full justify-between;
  @apply px-2 relative z-1;

  &::before {
    content: '';
    position: absolute;

    @apply inset-0 rounded-md -z-1 bg-transparent transition transition-colors opacity-30;
  }

  &:hover,
  &.active {
    &::before {
      @apply bg-gray;
    }
  }
}

.status-bar {
  @apply w-full h-[1px] bg-gray transform scale-y-80 relative z-1 flex-shrink-0;

  &.loading::before {
    @apply top-0 bottom-0 left-0 w-[500px] transform scale-y-80 absolute z-1;
    @apply bg-repeat;

    content: '';
    background: linear-gradient(
      90deg,
      transparent,
      rgba(176, 175, 175, 1),
      transparent
    );
    animation: move 2s linear infinite;
  }
}

@keyframes move {
  from {
    transform: translateX(-200px);
  }
  50% {
    transform: translateX(calc(100% + 500px + 200px));
  }
  to {
    transform: translateX(-200px);
  }
}
